<template>
  <div class="page-wrapper">
    <!-- 加密水印容器 -->
    <div class="watermarks">
      <div v-for="index in 40" :key="index" class="watermark" :style="getWatermarkStyle(index)">ZBT</div>
    </div>

    <div class="top-bar">
      <button class="back-btn" @click="goBack">返回</button>
      <button class="export-btn" @click="exportToExcel">导出为Excel</button>
      <button class="export-btn" @click="exportToPdf">导出为PDF</button>
    </div>

    <div class="profile-container">
      <h2 class="profile-title">{{ user.name || '--' }}的个人档案</h2>

      <div class="profile-header">

        <!-- 优先显示用户上传的头像 -->
        <!-- <img v-if="user.profilePicture" :src="user.profilePicture" alt="个人照片" class="profile-image" /> -->

        <!-- 如果没有上传头像，则根据性别选择默认头像 -->
        <!-- <img v-else-if="user.gender === 1" src="@/assets/man-image.jpg" alt="男性默认头像" class="profile-image" /> -->
        <img v-if="user.gender === 1" src="@/assets/man-image.jpg" alt="男性默认头像" class="profile-image" />

        <img v-else-if="user.gender === 0" src="@/assets/man-image.jpg" alt="女性默认头像" class="profile-image" />

        <!-- 如果性别未知或不符合预期值，则使用通用默认头像 -->
        <img v-else src="@/assets/images/person.jpg" alt="默认头像" class="profile-image" />
      </div>

      <!-- 基础信息 -->
      <div class="profile-section">
        <h3>基础信息</h3>
        <div class="profile-grid">
          <p><strong>姓名:</strong> {{ user.name || '--' }}</p>
          <p><strong>性别:</strong> {{ user.gender === 1 ? '男' : user.gender === 0 ? '女' : '--' }}</p>
          <p><strong>身份证号:</strong> {{ user.idCard || '--' }}</p>
          <p><strong>学号:</strong> {{ user.studentId || '--' }}</p>
          <p><strong>学院:</strong> {{ user.college || '--' }}</p>
          <p><strong>政治面貌:</strong> {{ user.politicalAffiliation || '--' }}</p>
          <p><strong>出生日期:</strong> {{ user.birthDate || '--' }}</p>
          <p><strong>民族:</strong> {{ user.nationality || '--' }}</p>
          <p><strong>籍贯:</strong> {{ user.nativePlace || '--' }}</p>
          <p><strong>家庭住址:</strong> {{ user.homeAddress || '--' }}</p>
          <p><strong>联系方式:</strong> {{ user.telephone || '--' }}</p>
          <p><strong>婚姻状况:</strong> {{ user.maritalStatus === 0 ? '未婚' : user.maritalStatus === 1 ? '已婚' : '--' }}</p>
          <p><strong>专业:</strong> {{ user.major || '--' }}</p>
          <p><strong>年级:</strong> {{ user.grade || '--' }}</p>
          <p><strong>班级:</strong> {{ user.className || '--' }}</p>
          <p><strong>学历:</strong> {{ user.educationBackground || '--' }}</p>
          <p><strong>学业情况:</strong> {{ user.schoolStatus || '--' }}</p>
          <p><strong>身高:</strong> {{ user.height ? user.height + '米' : '--' }}</p>
          <p><strong>体重:</strong> {{ user.weight ? user.weight + '千克' : '--' }}</p>
          <p><strong>视力:</strong> {{ user.vision || '--' }}</p>
          <p><strong>初次入读时间:</strong> {{ user.joinedSchoolDate || '--' }}</p>
          <p><strong>复学时间:</strong> {{ user.returnSchoolDate || '--' }}</p>
          <!-- <p><strong>创建时间:</strong> {{ user.createdAt || '--' }}</p>
          <p><strong>更新时间:</strong> {{ user.updatedAt || '--' }}</p> -->
          <p><strong>用户ID:</strong> {{ user.userId || '--' }}</p>
        </div>
      </div>

      <!-- 学业信息 -->
      <div class="profile-section">
        <h3>学业信息</h3>
        <div class="education-list">
          <div v-for="(stage, index) in educationHistory" :key="index" class="education-item"
            :class="{ 'is-expanded': stage.showDetails }">
            <div class="stage-header" @click="toggleStage(index)">
              <div class="header-content">
                <span class="stage-level">{{ stage.level }}</span>
                <span class="school-name">{{ stage.school || '--' }}</span>
                <span class="duration">{{ stage.startDate || '--' }} - {{ stage.endDate || '--' }}</span>
              </div>
              <span class="expand-icon">
                {{ stage.showDetails ? '▼' : '▶' }}
              </span>
            </div>
            <transition name="slide-fade">
              <div v-if="stage.showDetails" class="stage-details">
                <div class="detail-card">
                  <div class="detail-row">
                    <label>时间周期：</label>
                    <span>{{ stage.startDate || '--' }} 至 {{ stage.endDate || '--' }}</span>
                  </div>
                </div>
              </div>
            </transition>
          </div>
        </div>
      </div>

      <!-- 军事信息 -->
      <div class="profile-section">
        <h3>军事信息</h3>
        <div class="military-info">
          <p><strong>应征地:</strong> {{ user.joinArmyPlace || '--' }}</p>
          <p><strong>入伍日期:</strong> {{ user.joinArmyDate || '--' }}</p>
          <p><strong>退伍日期:</strong> {{ user.dischargeDate || '--' }}</p>
          <p><strong>军种:</strong> {{ user.militaryBranch || '--' }}</p>
          <p><strong>留队情况:</strong> {{ user.retentionArmyStatus || '--' }}</p>
          <p><strong>部队编号:</strong> {{ user.unitNumber || '--' }}</p>
          <p><strong>军衔:</strong> {{ user.rankname || '--' }}</p>
          <p><strong>军事专业:</strong> {{ user.militarySpecialty || '--' }}</p>
          <p><strong>军事职务:</strong> {{ user.militaryPosition || '--' }}</p>
          <p><strong>退役证编号:</strong> {{ user.leaveArmyCertificateNumber || '--' }}</p>
          <p><strong>第一次报名应征日期:</strong> {{ user.firstEnlistmentDate || '--' }}</p>
          <p><strong>备注:</strong> {{ user.remark || '--' }}</p>
          <div>
            <p><strong>部队获奖情况:</strong></p>
            <ul v-if="user.troopAwards">
              <li>{{ user.troopAwards }}</li>
            </ul>
            <p v-else>--</p>
          </div>
        </div>

        <h4>体能训练情况</h4>
        <span v-if="user.physicalTestVOList?.length" @click="changePhysicalTable()">
          {{ isPhysicalTable ? '收起▼' : '点击展开▶' }}
        </span>
        <div v-if="user.physicalTestVOList?.length && isPhysicalTable" class="table-container">
          <table class="compare-table">
            <thead>
              <tr>
                <th colspan="1" rowspan="2">项目</th>
                <th :colspan="user.physicalTestVOList.length * 2" class="main-header">体能测试成绩</th>
              </tr>
              <tr>
                <template v-for="test in user.physicalTestVOList" :key="test.testYear">
                  <th colspan="2">{{ test.testYear || '--' }}</th>
                </template>
              </tr>
              <tr>
                <th>测试项</th>
                <template v-for="test in user.physicalTestVOList" :key="test.testYear">
                  <th>成绩</th>
                  <th>分数</th>
                </template>
              </tr>
            </thead>
            <tbody>
              <template v-for="(item, index) in physicalItems" :key="index">
                <tr>
                  <td class="item-name">{{ item.label }}</td>
                  <template v-for="test in user.physicalTestVOList" :key="test.testYear">
                    <td>{{ getTestValue(test, item.key) || '--' }}</td>
                    <td>{{ getTestScore(test, item.key) || '--' }}</td>
                  </template>
                </tr>
              </template>
              <tr class="summary-row">
                <td>考核结果</td>
                <template v-for="test in user.physicalTestVOList" :key="test.testYear">
                  <td colspan="2" class="result-cell">{{ test.testGrade || '--' }}</td>
                </template>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-else class="no-data">暂无体测数据</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getJoinArmyInfo } from '@/api/join-army/join-army';

const isPhysicalTable = ref(true);

const changePhysicalTable = () => {
  isPhysicalTable.value = !isPhysicalTable.value;
};

//获取路由传递的参数
const route = useRoute();
const id = route.query.id;

const user = ref({
  id: null,
  name: null,
  gender: null,
  idCard: null,
  nationality: null,
  politicalAffiliation: null,
  educationBackground: null,
  schoolStatus: null,
  college: null,
  major: null,
  studentId: null,
  homeAddress: null,
  telephone: null,
  joinArmyPlace: null,
  joinArmyDate: null,
  dischargeDate: null,
  militaryBranch: null,
  retentionArmyStatus: null,
  troopAwards: null,
  remark: null,
  createdAt: null,
  updatedAt: null,
  profilePicture: null,
  birthDate: null,
  maritalStatus: null,
  nativePlace: null,
  grade: null,
  className: null,
  height: null,
  weight: null,
  vision: null,
  unitNumber: null,
  rankname: null,
  firstEnlistmentDate: null,
  militarySpecialty: null,
  militaryPosition: null,
  joinedSchoolDate: null,
  returnSchoolDate: null,
  leaveArmyCertificateNumber: null,
  userId: null,
  primarySchoolName: null,
  primarySchoolStartDate: null,
  primarySchoolEndDate: null,
  middleSchoolName: null,
  middleSchoolStartDate: null,
  middleSchoolEndDate: null,
  highSchoolName: null,
  highSchoolStartDate: null,
  highSchoolEndDate: null,
  universityName: null,
  universityStartDate: null,
  universityEndDate: null,
  physicalTestVOList: []
});

const educationHistory = computed(() => {
  return [
    {
      level: '小学',
      school: user.value.primarySchoolName || '--',
      startDate: user.value.primarySchoolStartDate || '--',
      endDate: user.value.primarySchoolEndDate || '--',
      showDetails: false
    },
    {
      level: '初中',
      school: user.value.middleSchoolName || '--',
      startDate: user.value.middleSchoolStartDate || '--',
      endDate: user.value.middleSchoolEndDate || '--',
      showDetails: false
    },
    {
      level: '高中',
      school: user.value.highSchoolName || '--',
      startDate: user.value.highSchoolStartDate || '--',
      endDate: user.value.highSchoolEndDate || '--',
      showDetails: false
    },
    {
      level: '大学',
      school: user.value.universityName || '--',
      startDate: user.value.universityStartDate || '--',
      endDate: user.value.universityEndDate || '--',
      showDetails: false
    }
  ];
});

const physicalItems = [
  { label: '身高', key: 'height', unit: 'cm' },
  { label: '体重', key: 'weight', unit: 'kg' },
  { label: 'BMI', key: 'bmi' },
  { label: '左眼裸眼视力', key: 'leftEyeVision' },
  { label: '右眼裸眼视力', key: 'rightEyeVision' },
  { label: '左眼串镜检查', key: 'leftEyeLens' },
  { label: '右眼串镜检查', key: 'rightEyeLens' },
  { label: '左眼屈光不正', key: 'leftEyeRefraction' },
  { label: '右眼屈光不正', key: 'rightEyeRefraction' },
  { label: '肺活量', key: 'lungCapacity', unit: 'ml' },
  { label: '50米跑', key: 'fiftyMeter', unit: '秒' },
  { label: '立定跳远', key: 'standingJump', unit: 'cm' },
  { label: '坐位体前屈', key: 'sitReach', unit: 'cm' },
  { label: '800米跑', key: 'eightHundredMeter', unit: '秒' },
  { label: '1000米跑', key: 'oneThousandMeter', unit: '秒' },
  { label: '仰卧起坐', key: 'sitUps', unit: '次' },
  { label: '引体向上', key: 'pullUps', unit: '次' },
  { label: '体育分数', key: 'peScore' }
];

const getTestValue = (test, key) => {
  const item = physicalItems.find(i => i.key === key);
  if (!test[key]) return '--';
  return item?.unit ? `${test[key]}${item.unit}` : test[key];
};

const getTestScore = (test, key) => {
  const scoreKeys = {
    height: 'heightWeightScore',
    weight: 'heightWeightScore',
    bmi: 'heightWeightScore',
    leftEyeVision: null,
    rightEyeVision: null,
    leftEyeLens: null,
    rightEyeLens: null,
    leftEyeRefraction: null,
    rightEyeRefraction: null,
    lungCapacity: 'lungCapacityScore',
    fiftyMeter: 'fiftyMeterScore',
    standingJump: 'standingJumpScore',
    sitReach: 'sitReachScore',
    eightHundredMeter: 'enduranceRunScore',
    oneThousandMeter: 'enduranceRunScore',
    sitUps: 'strengthScore',
    pullUps: 'strengthScore',
    peScore: null
  };
  return scoreKeys[key] ? test[scoreKeys[key]] || '--' : '--';
};

const toggleStage = (index: number) => {
  educationHistory.value[index].showDetails = !educationHistory.value[index].showDetails;
};

const getWatermarkStyle = (index: number) => {
  const top = Math.random() * 100;
  const left = Math.random() * 100;
  const rotate = Math.random() * 60 - 30;
  return {
    top: `${top}%`,
    left: `${left}%`,
    transform: `rotate(${rotate}deg)`,
    fontSize: `${Math.random() * 10 + 12}px`,
    opacity: Math.random() * 0.2 + 0.1
  };
};


onMounted(() => {
  initData();
});


//根据id获取简历数据
const initData = () => {
  getJoinArmyInfo(id).then(response => {
    user.value = response.data;
  }).catch(error => {
    console.error("请求失败:", error);
  });
};

const goBack = () => {
  window.history.back();
};

const exportToExcel = () => {
  ElMessage.info("还在开发中！");
};

const exportToPdf = () => {
  const data = {
    studentIds: [id]
  };
  ElMessage.info("还在开发中！");
};
</script>

<style scoped>
/* 保持原有样式不变，添加少量调整 */
.education-list {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
}

.education-item {
  border-bottom: 1px solid #eee;
  transition: all 0.3s ease;
}

.education-item:last-child {
  border-bottom: none;
}

.stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: #f8f9fa;
  cursor: pointer;
  transition: background 0.2s;
}

.stage-header:hover {
  background: #f1f3f5;
}

.header-content {
  display: flex;
  gap: 20px;
  align-items: center;
}

.stage-level {
  font-weight: 600;
  min-width: 60px;
  color: #007bff;
}

.school-name {
  font-weight: 500;
  color: #2c3e50;
}

.duration {
  color: #666;
  font-size: 0.9em;
}

.expand-icon {
  font-size: 0.8em;
  color: #666;
}

.stage-details {
  padding: 16px 20px;
  background: #fff;
  border-top: 1px solid #eee;
}

.detail-card {
  display: grid;
  gap: 16px;
  padding: 16px;
  background: #fcfcfc;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.detail-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: start;
}

.detail-row label {
  font-weight: 500;
  color: #666;
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.page-wrapper {
  position: relative;
  min-width: 970px;
}

.table-container {
  overflow-x: auto;
  margin: 20px 0;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.compare-table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
  background: white;
}

.compare-table th {
  background: #f8f9fa;
  font-weight: 600;
  padding: 12px 15px;
  border: 1px solid #ddd;
}

.main-header {
  background: #007bff !important;
  color: white;
  font-size: 16px;
}

.item-name {
  font-weight: 500;
  background: #f4f4f4;
}

.compare-table td {
  padding: 10px 15px;
  border: 1px solid #eee;
  text-align: center;
  min-width: 80px;
}

.summary-row td {
  background: #fff3cd;
  font-weight: bold;
}

.result-cell {
  color: #d35400;
}

.no-data {
  text-align: center;
  padding: 20px;
  color: #666;
  font-size: 16px;
}

.watermarks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.watermark {
  position: absolute;
  color: rgba(15, 14, 14, 0.15);
  white-space: nowrap;
  user-select: none;
}

.top-bar {
  padding: 10px 0;
}

.back-btn,
.export-btn {
  margin: 10px;
  padding: 10px 20px;
  font-size: 14px;
  border: none;
  background-color: #00aaff;
  color: white;
  cursor: pointer;
  border-radius: 5px;
}

.export-btn {
  background-color: #4caf50;
}

.export-btn:hover,
.back-btn:hover {
  opacity: 0.8;
}

.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.profile-title {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 20px;
}

.profile-header {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.profile-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #007bff;
}

.profile-section {
  margin-bottom: 20px;
  background: #f9f9f9;
}

.profile-section h3 {
  font-size: 22px;
  color: #007bff;
  margin-bottom: 10px;
  border-left: 4px solid #007bff;
  padding-left: 10px;
}

.profile-section h4 {
  font-size: 17px;
  color: #000000;
  margin-bottom: 4px;
  padding-left: 8px;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 8px;
}

.profile-grid p {
  margin: 5px 0;
  line-height: 1.6;
  font-size: 17px;
  color: #333;
}

.military-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 8px;
}
</style>